import { cloneElement, useState } from "react"
export function useHover(element) {
    const [state, setState] = useState(false);

    const onMouseEnter = (originalOnMouseEnter) =>  {
        return ()=>{
            originalOnMouseEnter()
            setState(true)
        }
    };
    const onMouseLeave = (originalOnMouseLeave) =>  {
        return ()=>{
            originalOnMouseLeave()
            setState(false)
        }
    };

    if (typeof element === 'function') {
        element = element(state);
    }

    const el = React.cloneElement(element, {//克隆dom元素，得到dom元素的那个对象，并保留原绑定事件
        onMouseEnter: onMouseEnter(element.props.onMouseEnter),
        onMouseLeave: onMouseLeave(element.props.onMouseLeave),
    });

    return [el, state];
}